<template>
	<wrapPopup v-if="isShow" @click="onDismiss">
		<view class="wrap-store-service-sign flex column align-center" @click.stop.prevent>
			<view class="title fBold f-36">添加服务标签</view>

			<input class="input f-26" placeholder="请输入标签名称" placeholder-class="place" v-model="name" />

			<input class="input f-26" placeholder="请输入标签描述" placeholder-class="place" v-model="description" />

			<view class="sure f-34" @click.stop="onSure">确认</view>
		</view>
	</wrapPopup>
</template>

<script>
	import { AddServiceSign } from "@/API/store.js";
	import wrapPopup from "@/components/popup/popup.vue";
	export default {
		components: {
			wrapPopup,
		},
		props: {
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				name: "",
				description: "",
			};
		},
		methods: {
			/**
			 * 关闭
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},

			/**
			 * 确认
			 */
			onSure() {
				if (this.name.trim() === "") {
					this.$st.show("请输入标签名称");
					return;
				}
				if (this.description.trim() === "") {
					this.$st.show("请输入标签描述");
					return;
				}

				this.$throttle(() => {
					AddServiceSign(this.name, this.description).then((res) => {
						this.$st.success("添加成功", () => {
							this.$emit("onSureAdd");
							this.onDismiss();
						});
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-store-service-sign {
		width: 600rpx;
		background-color: white;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 15rpx;
		padding: 50rpx 30rpx;
		gap: 40rpx;

		.title {
			color: #121212;
		}

		.input {
			width: 400rpx;
			height: 80rpx;
			background-color: #f4f4f4;
			border-radius: 40rpx;
			overflow: hidden;
			text-align: center;
			color: #333333;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		/deep/ .place {
			color: #cacaca;
		}

		.sure {
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: white;
			background: linear-gradient(to right, #f49355, #dd551b);
			border-radius: 40rpx;
			overflow: hidden;
		}
	}
</style>
